<template>
  <!-- 采访审核页面 -->
  <div>
    <Card>
      <div style="min-height: 730px">
        <Row>
          <Col span="1">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>采访审核</Col>
            </Row>
          </Col>
        </Row>
        <Table
          :columns="columns1"
          :data="nowData"
          ref="selection"
          stripe
          class="nr-table"
          border
          highlight-row
        ></Table>
        <!-- total：分页显示多少条数据
                  page-size：每页显示多少条数据
                  current:当前页码
                  on-change：改变页码回调，返回值：当前页码
        on-page-size-change：切换每页条数时回调，返回值：每页的数据条数-->
        <Row type="flex" justify="center" class="nl-page">
          <Col>
            <Page
              :total="dataCount"
              :page-size="pageSize"
              :current="pageCurrent"
              @on-change="changepage"
              @on-page-size-change="_nowPageSize"
              show-total
              show-sizer
              show-elevator
            />
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表格 标题
      columns1: [
        {
          // title: "采访标题",
          key: "headlines",
          align: "center",
          width: 350,
          resizable: true,
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "采访标题"
            );
          }
        },
        {
          // title: "发布媒体",
          key: "media",
          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "采访媒体"
            );
          }
        },
        {
          // title: "记者",
          key: "reporter",
          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "记者"
            );
          }
        },
        {
          // title: "拟采访时间",
          key: "releaseTime",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "拟采访时间"
            );
          }
        },
        {
          // title: "提交人",
          key: "submitter",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "提交人"
            );
          }
        },
        {
          // title: "提交时间",
          key: "subTime",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "提交时间"
            );
          }
        },
        {
          // title: "审核状态",
          key: "status",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "审核状态"
            );
          }
        },
        {
          // title: "操作",
          key: "operating",
          width: 200,
          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "操作"
            );
          },
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                      // console.log(this.$router)
                      console.log(params.row);
                      this.$router.push({
                        name: "newsDetails",
                        params: { id: params.index }
                      });
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      //表格数据
      data1: [],
      //分页默认参数
      pageSize: 10, //每页显示多少条数据
      dataCount: 0, //总条数
      pageCurrent: 1 //当前页
    };
  },
  created() {
    this._getData(); //渲染表格数据
  },
  methods: {
    //所有数据
    _getData() {
      //获取data1
      this.data1 = [];
      this.nowData = [];
      window.news = [];
      window.focusItem = {};
      //将数据填入data1
      for (let i = 0; i < 22; i++) {
        if (i % 2 == 0) {
          this.repmethod = "手动上报";
        } else {
          this.repmethod = "自动上报";
        }
        let a = {
          id: i,
          media: "凤凰网山东频道",
          headlines: "渤海银行济南阳光花园社区支行举办活动" + i,
          reporter: "张三",
          releaseTime: "2020-6-20",
          submitter: "李四",
          subTime: "2020-6-30",
          status: "审核中"
        };
        this.data1.push(a);
      }
      window.news = this.data1;
      //分页显示所有数据总数
      this.dataCount = this.data1.length;
      //循环展示页面刚加载是需要的数据条数
      // this.nowData = [];
      // for (let i = 0; i < this.pageSize; i++) {
      //   this.nowData.push(this.data1[i]);
      // }
      let _start = (this.pageCurrent - 1) * this.pageSize;
      let _end = this.pageCurrent * this.pageSize;
      this.nowData = this.data1.slice(_start, _end);
    },
    //点击，切换页面
    changepage(index) {
      let _start = (index - 1) * this.pageSize;
      let _end = index * this.pageSize;
      this.nowData = this.data1.slice(_start, _end);
      this.pageCurrent = index;
      this._getData();
    },
    //每页显示的数据条数
    _nowPageSize(index) {
      //实时获取当前需要显示的条数
      this.pageSize = index;
      this._getData();
    }
  }
};
</script>

<style scoped>
/* 修饰的色块 */
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* 分页栏样式 */
.nl-page {
  margin-top: 10px;
}
/* 表格样式 */
.nr-table {
  margin-top: 10px;
}
</style>
